<template>
  <view class="register-container">
    <view class="register-card">
      <view class="logo-wrap">
        <image
          class="logo-img"
          src="http://localhost:8080/xiquwenhuaxiaochengxu/img/logo.jpg"
          mode="aspectFill"
        ></image>
      </view>

      <view v-if="tableName == 'yonghu'" class="form-group">
        <input
          v-model="ruleForm.username"
          class="input-style"
          type="text"
          placeholder="账号"
        />
        <input
          v-model="ruleForm.yonghuName"
          class="input-style"
          type="text"
          placeholder="姓名"
        />
        <input
          v-model="ruleForm.password"
          class="input-style"
          type="password"
          placeholder="密码"
        />
        <input
          v-model="ruleForm.yonghuPhone"
          class="input-style"
          type="text"
          placeholder="手机号码"
        />
        <input
          v-model="ruleForm.yonghuIdNumber"
          class="input-style"
          type="text"
          placeholder="身份证号"
        />

        <view class="picker-wrap">
          <picker
            @change="yonghusexTypesChange"
            :value="yonghusexTypesIndex"
            :range="yonghusexTypesOptions"
            range-key="indexName"
          >
            <view class="picker-select">
              {{ ruleForm.sexValue || "请选择性别" }}
            </view>
          </picker>
        </view>
      </view>

      <button @tap="register" class="register-btn">立即注册</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      yonghusexTypesOptions: [],
      yonghusexTypesIndex: 0,
      ruleForm: {},
      tableName: "",
    };
  },
  async onLoad() {
    let res = [];
    let table = uni.getStorageSync("loginTable");
    this.tableName = table;

    // 自定义下拉框值
    if (this.tableName == "yonghu") {
      let params = {
        page: 1,
        limit: 100,
        dicCode: "sex_types",
      };
      let res = await this.$api.page(`dictionary`, params);
      this.yonghusexTypesOptions = res.data.list;
    }

    this.styleChange();
  },
  methods: {
    // 下拉变化
    yonghusexTypesChange(e) {
      this.yonghusexTypesIndex = e.target.value;
      this.ruleForm.sexValue =
        this.yonghusexTypesOptions[this.yonghusexTypesIndex].indexName;
      this.ruleForm.sexTypes =
        this.yonghusexTypesOptions[this.yonghusexTypesIndex].codeIndex;
    },

    styleChange() {
      this.$nextTick(() => {
        // document.querySelectorAll('.uni-yaoxianStyle .uni-yaoxianStyle-yaoxianStyle').forEach(el=>{
        //   el.style.backgroundColor = this.registerFrom.content.yaoxianStyle.backgroundColor
        // })
      });
    },
    // 获取uuid
    getUUID() {
      return new Date().getTime();
    },
    // 注册
    async register() {
      if (!this.ruleForm.username && `yonghu` == this.tableName) {
        this.$utils.msg(`姓名不能为空`);
        return;
      }
      if (!this.ruleForm.password && `yonghu` == this.tableName) {
        this.$utils.msg(`密码不能为空`);
        return;
      }
      if (!this.ruleForm.yonghuName && `yonghu` == this.tableName) {
        this.$utils.msg(`姓名不能为空`);
        return;
      }
      if (
        `yonghu` == this.tableName &&
        this.ruleForm.yonghuPhone &&
        !this.$validate.isMobile(this.ruleForm.yonghuPhone)
      ) {
        this.$utils.msg(`手机应输入手机格式`);
        return;
      }
      if (
        `yonghu` == this.tableName &&
        this.ruleForm.yonghuIdNumber &&
        !this.$validate.checkIdCard(this.ruleForm.yonghuIdNumber)
      ) {
        this.$utils.msg(`身份证应输入正确格式`);
        return;
      }
      await this.$api.register(`yonghu`, this.ruleForm);
      this.$utils.msgBack("注册成功");
    },
  },
};
</script>
<style>
/* 保持与登录页面一致的风格 */
.register-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100);
  padding: 40rpx;
}

.register-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 24rpx;
  padding: 40rpx 32rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
}

.logo-wrap {
  text-align: center;
  margin-bottom: 60rpx;
}

.logo-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 4rpx solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
}

.input-style {
  height: 96rpx;
  padding: 0 32rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  font-size: 30rpx;
  color: #2d3436;
  transition: all 0.3s ease;
}

.input-style::placeholder {
  color: #a4a9ad;
}

.input-style:focus {
  background: #fff;
  box-shadow: 0 4rpx 12rpx rgba(82, 136, 255, 0.2);
}

.picker-wrap {
  position: relative;
}

.picker-select {
  height: 96rpx;
  line-height: 96rpx;
  padding: 0 32rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  font-size: 30rpx;
  color: #2d3436;
}

.picker-select::after {
  content: "›";
  position: absolute;
  right: 32rpx;
  transform: rotate(90deg);
  color: #a4a9ad;
  font-size: 40rpx;
}

.register-btn {
  height: 96rpx;
  line-height: 96rpx;
  background: linear-gradient(45deg, #5470ff, #82a0ff);
  color: #fff;
  font-size: 34rpx;
  border-radius: 12rpx;
  margin: 60rpx 0 20rpx;
  transition: transform 0.2s;
}

.register-btn:active {
  transform: scale(0.98);
}
</style>
